<template>
  <Card style="height:800px">
  <Card style="width:350px;margin:150px auto;" >
    <Row type="flex" align="middle">
      <Col span="6"  style="margin-top:30px;" >流程节点:</Col>
      <Col span="25">
      <Select v-model="nodeCode" style="width:200px" @on-change="nodeChange" label-in-value>
        <Option v-for="item in nodeCodeDatas" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      </Col>
    </Row>
    <Row type="flex" align="middle">
      <Col span="6" style="margin-top:30px;">角色:</Col>
      <Col span="18">
      <Select v-model="roleCode" style="width:200px"  @on-change="roleChange" label-in-value>
        <Option v-for="item in roleCodeDatas" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      </Col>
    </Row>
    <Row type="flex" align="middle">
      <Col span="6" style="margin-top:30px;">是否有效:</Col>
      <Col span="25">
      <Select v-model="status" style="width:200px"  >
        <Option v-for="item in statusDatas" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </Select>
      </Col>
    </Row>
    <Row type="flex" align="middle" style="margin-top:20px">
      <Col span="9"></Col>
      <Col span="14">
      <Button type="primary" @click="subFlowNode" size="small">提交</Button>
      </Col>
    </Row>
  </Card>
  </Card>
</template>
<script>

export default {
  data () {
    return {
      nodeCode: null,
      nodeName: null,
      nodeCodeDatas: [],
      roleCode: null,
      roleName: null,
      roleCodeDatas: [],
      status: 0,
      statusDatas: [
        {
          label: '有效',
          value: 0
        },
        {
          label: '无效',
          value: 1
        }
      ]
    }
  },
  created () {
    this.$ajax = this.$util.ajax()
    this.initFlowCode()
    this.initRoles()
  },
  methods: {
    nodeChange (node) {
      this.nodeName = node.label
      this.nodeCode = node.value
    },
    roleChange (role) {
      this.roleName = role.label
      this.roleCode = role.value
    },
    subFlowNode () {
      var params = {}
      params.nodeCode = this.nodeCode
      params.nodeName = this.nodeName
      params.roleCode = this.roleCode
      params.roleName = this.roleName
      params.status = this.status
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/case_node_role/service/merge', params).then(re => {
        if (re.data.code === 'success') {
          this.$Message.success('操作成功!')
          this.$router.push({
            name: 'case_node_role'
          })
        } else {
          this.$Message.warning(re.data.data)
        }
      }).catch(er => {
        this.$Message.warning('操作失败')
      })
    },
    // 加载流程节点下拉框
    initFlowCode () {
      var params = {}
      params.pageSize = 99999
      this.$ajax.post(this.$appContext.marvels_core_approve + 'approve/flow_node/service/nlist', params).then(re => {
        this.nodeCodeDatas = []
        var datas = re.data.data.list || []
        datas.forEach(item => {
          var tData = {}
          tData.label = item.nodeName
          tData.value = item.nodeCode
          this.nodeCodeDatas.push(tData)
        })
      }).catch(er => {
      })
    },
    // 加载角色下拉框
    initRoles () {
      var params = { pageNo: 1, pageSize: 20, param: {} }
      this.$ajax.post(this.$appContext.marvels_core_system + 'system/pmsn/service/roleAll', params).then(re => {
        this.roleCodeDatas = []

        var datas = re.data.data || []
        datas.forEach(item => {
          var tData = {}
          tData.label = item.roleName
          tData.value = item.roleCode
          this.roleCodeDatas.push(tData)
        })
      }).catch(er => {
      })
    }
  }
}
</script>

<style lang="less">
  .xzqy-page {
    /*@media only screen and (min-width:1366px){
      .bottom-btn button:nth-of-type(1){
        margin-right:70px;
      }
    }
    @media only screen and (min-width:1200px){
      .bottom-btn button:nth-of-type(1){
        margin-right:40px;
      }
    }*/
  }
</style>
